import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class FittedBoxExample extends StatefulWidget {
  const FittedBoxExample({Key? key}) : super(key: key);

  @override
  State<FittedBoxExample> createState() => _FittedBoxExampleState();
}

class _FittedBoxExampleState extends State<FittedBoxExample> {
  int statusIndx = 0;

  static const status = [
    {
      'key': 'fill',
      'desc': '不等比例缩放，图片填充满整个控件',
      'value': BoxFit.fill,
    },
    {
      'key': 'contain',
      'desc': '等比例缩放，直到图片的高或者宽填充满控件',
      'value': BoxFit.contain,
    },
    {
      'key': 'cover',
      'desc': '等比例缩放，直到图片的宽和高都充满整个控件，图片可以超出控件的范围，但是会导致显示不完整。',
      'value': BoxFit.cover,
    },
    {
      'key': 'fitWidth',
      'desc': '等比例缩放，宽度充满',
      'value': BoxFit.fitWidth,
    },
    {
      'key': 'fitHeight',
      'desc': '等比例缩放，高度充满',
      'value': BoxFit.fitHeight,
    },
    {
      'key': 'none',
      'desc': '不等比例缩放，保留原始图片大小并居中显示',
      'value': BoxFit.none,
    },
    {
      'key': 'scaleDown',
      'desc': '等比例缩放，两种缩放方式，第一种当图片大小大于控件时采用contain布局，第二种当图片宽高小于控件时采用none',
      'value': BoxFit.scaleDown,
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FittedBoxExample'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width: 100,
              height: 200,
              color: Colors.orangeAccent,
              child: FittedBox(
                fit: status[statusIndx]['value']! as BoxFit,
                // alignment: Alignment.center,
                clipBehavior: Clip.antiAliasWithSaveLayer,
                child: Image(
                  image: AssetImage('assets/images/lock.png'),
                ),
              ),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  if (statusIndx == status.length - 1) {
                    statusIndx = 0;
                    return;
                  }
                  statusIndx += 1;
                });
                if (kDebugMode) {
                  print(statusIndx);
                }
              },
              child: Text('切换 FittedBox fit属性 状态'),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(
                maxWidth: 400,
                minWidth: 400,
                maxHeight: 300,
                minHeight: 300,
              ),
              child: Text(
                "${status[statusIndx]["key"]}\n${status[statusIndx]["desc"]}",
              ),
            ),
          ],
        ),
      ),
    );
  }
}
